<template>
	<view class="flex-col page min-vh-100">
		<view class="px-3 mt-12" v-if="promotionBannerList.length">
			<u-swiper :list="promotionBannerList" border-radius="0" height="280"
				@click="jumpBannerPromotion"></u-swiper>
		</view>
		<view style="padding: 36rpx 36rpx 0;">
			<ad-custom unit-id="adunit-b85dff4fc885c3c5" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		<view class="flex-col list">
			<view class="list-item flex-col" :key="item.id" v-for="(v,i) in stores"
				@click="$u.route({url:'pages/index/storeIndex',params:{id:v.id}})">
				<view class="top-section flex-col">
<!-- 					<view class="promotion-wrapper">
						<text>{{ v.rooms[0].room_area }}平米</text>
						<text style="margin-left: 20rpx;">可容纳{{ v.rooms[0].room_personnum }}人</text>
					</view> -->
					<view class="imgBox">
						<image :src="v.store_bannerimage" class="img" mode="aspectFill" />
					</view>
					<view class="w-100 flex-row justify-between align-items-center" style="margin-top: 172rpx;">
						<view class="props-wrapper">
							<text>{{ v.rooms[0].room_area }}平米</text>
							<text style="margin-left: 20rpx;">可容纳{{ v.rooms[0].room_personnum }}人</text>
						</view>
						<view class="text-wrapper flex-col items-center">
							<text>订</text>
						</view>
					</view>
				</view>
				<view class="ykx_container">
					<view class="flex-row justify-between">
						<view class="store_name h1">
							{{v.store_name}}
						</view>
						<view class="distance">
							{{julis[i]}}
						</view>
					</view>
					<view class="desc_wrapper normal">
						<view class="location_wrapper">
							<image src="@/static/svgicon/location.svg" class="image_20" />
							<view class="address">{{v.store_address}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showPromotion" mode="center" border-radius="16" :closeable="true">
			<view class="promotion_container">
				<u-swiper :list="promotionList" height="600" img-mode="heightFix"
					@click="jumpPopupPromotion"></u-swiper>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stores: [],
				user_lat: null,
				user_lng: null,
				showPromotion: false,
				promotionList: [],
				promotionBannerList: [],
			};
		},
		computed: {
			julis: function() {
				if (null == this.user_lat) {
					return []
				} else {
					let k = this.stores.map((e) => {
						return this.distance(this.user_lat, this.user_lng, e.store_latitude, e.store_longitude)
					})
					return k
				}
			}
		},
		onLoad(options) {

			// this.getBanner()
			this.$u.api.getPromotion()
				.then((res) => {
					this.promotionList = res.data.filter(e => {
						if (1 == e.type) {
							return true
						}
					})
					this.promotionBannerList = res.data.filter(e => {
						if (2 == e.type) {
							return true
						}
					})
					if (this.promotionList.length > 0) {
						this.showPromotion = true
					}

				})
			this.getStore()
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.user_lat = res.latitude;
					this.user_lng = res.longitude;
					this.getStore()
				},
			});

		},
		onShareAppMessage(res) {
			return {
				// title: v.room.room_name + ' ' + v.starttime,
				// path: '/pages/myReservation/automaticUnlocking?id=' + v.id,
				imageUrl: 'https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/dancegaden/share_image.png'
			}
		},
		methods: {
			getStore() {
				this.$u.api.getStores()
					.then((res) => {
						if (1 == res.code) {
							if (this.user_lat) {
								this.stores = res.data.map(e => {
									return {
										...e,
										mile: this.getMile(e),
										meter: this.getMeter(e)
									}
								})
								this.stores.sort((a, b) => a.meter.slice(0, -2) - b.meter.slice(0, -2))
							} else {
								this.stores = res.data
							}

						}
					})
			},
			getBanner() {
				this.$u.api.getPromotion()
					.then((res) => {
						this.promotionList = res.data.filter(e => {
							if (1 == e.type) {
								return true
							}
						})
						this.promotionBannerList = res.data.filter(e => {
							if (2 == e.type) {
								return true
							}
						})
						if (this.promotionList.length > 0) {
							this.showPromotion = true
						}

					})
			},
			getMile(e) {
				return this.distance(this.user_lat, this.user_lng, e.store_latitude, e.store_longitude)
			},
			getMeter(e) {
				return this.distanceM(this.user_lat, this.user_lng, e.store_latitude, e.store_longitude)
			},
			jumpPopupPromotion(index) {
				let id = this.promotionList[index].id
				if (this.promotionList[index].hasContent > 0) {
					this.$u.route({
						url: 'pages/index/promotionDetail?id=' + id
					})
				}
			},
			jumpBannerPromotion(index) {
				let id = this.promotionBannerList[index].id
				if (this.promotionBannerList[index].jumpto) {
					this.$u.route({
						url: this.promotionBannerList[index].jumpto
					})
				}
				// if (this.promotionBannerList[index].hasContent > 0) {
				// 	this.$u.route({
				// 		url: 'pages/index/promotionDetail?id=' + id
				// 	})
				// }
			}
		},
	};
</script>

<style scoped lang="scss">
	.ykx_container {
		padding: 24rpx;

		.desc_wrapper {
			margin-top: 20rpx;

			.location_wrapper {
				display: flex;
				flex-wrap: row nowrap;

				.address {

					flex-shrink: 1;
					margin-right: 70rpx;
					margin-left: 12rpx;
				}
			}

			.distance_wrapper {
				margin-top: 12rpx;
				display: flex;
				flex-wrap: row nowrap;

				.distance {
					margin-left: 12rpx;
				}
			}
		}

		.right {
			flex: none;
		}

		.gbutton {
			width: 76rpx;
			height: 76rpx;
			border: 4rpx solid #D85886;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.image_20 {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.swipes {
		::deep .u-swiper-indicator {
			bottom: -26rpx !important;
		}
	}

	::deep .u-swiper-wrap {
		overflow: inherit !important;
	}

	::deep .uni-swiper-wrapper {
		border-radius: 24rpx !important;
	}

	.page {
		background-color: #ffffff;

		.nav-title {
			color: #000000;
			font-size: 28rpx;
			font-weight: $base-font-weight-600;
			padding-left: 32rpx;
		}

		.list {
			padding: 32rpx 36rpx 80rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.list-item {
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 4rpx 8rpx 0px rgb(238, 235, 236);
				border-radius: 16rpx;
				border: solid 2rpx rgb(236, 236, 236);
				margin-bottom: 36rpx;

				.top-section {
					height: 272rpx;
					color: rgb(247, 247, 247);
					font-size: $base-font-size-18;
					font-weight: $base-font-weight-600;
					line-height: 50rpx;
					white-space: nowrap;
					border-radius: 16rpx 16rpx 0px 0px;
					position: relative;

					.promotion-wrapper {
						position: absolute;
						top: 24rpx;
						left: 24rpx;

						z-index: 5;

						text {
							font-style: normal;
							font-weight: 400;
							font-size: 28rpx;
							line-height: 30rpx;
							color: #FFFFFF;
							background: rgba(237, 87, 141, 0.7);
							border-radius: 4px;
							padding: 10rpx 20rpx;
						}
					}

					.imgBox {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;

						.img {
							width: 100%;
							height: 272rpx;
							border-radius: 16rpx 16rpx 0px 0px;
						}
					}

					.props-wrapper {
						margin-left: 24rpx;
						position: relative;
						z-index: 5;

						text {
							font-style: normal;
							font-weight: 400;
							font-size: 28rpx;
							line-height: 30rpx;
							color: #FFFFFF;
							background: rgba(237, 87, 141, 0.7);
							border-radius: 4px;
							padding: 10rpx 20rpx;
						}
					}

					.text-wrapper {
						margin-right: 24rpx;
						padding: 18rpx 0 16rpx;
						background-color: rgb(23, 190, 187);
						border-radius: 50%;
						width: 84rpx;
						z-index: 5;
					}
				}

				.bottom-group {
					padding: 20rpx 22rpx;

					.top-group {
						color: $base-deep-black;
						font-size: $base-font-size-18;
						font-weight: $base-font-weight-600;
						line-height: 50rpx;
						white-space: nowrap;

						.text_2 {
							color: $base-deep-black;
							font-size: $base-font-size-18;
							font-weight: $base-font-weight-600;
							line-height: 50rpx;
							text-align: left;
							width: 432rpx;
						}

						.text_3 {
							color: initial;
							font-size: initial;
							font-weight: initial;
							line-height: initial;
							text-align: initial;
							width: initial;
						}

						.image_1 {
							margin-right: 4rpx;
							border-radius: 8rpx;
							width: 76rpx;
							height: 76rpx;
							border: 2px solid #D85886;
							display: flex;
							align-items: center;
							justify-content: center;

							.icon {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.bottom-group_1 {
						padding: 0 4rpx;
						color: $base-deep-black;
						font-size: $base-font-size-14;
						font-weight: $base-font-weight-300;
						line-height: 40rpx;
						white-space: nowrap;

						.left-group {
							border-radius: 8rpx;
							width: 76rpx;
							height: 76rpx;

							.group {
								padding-left: 4rpx;
								align-items: center;

								.image_3 {
									width: 24rpx;
									height: 32rpx;
								}

								.text_4 {
									margin-left: 20rpx;
								}
							}

							.group_1 {
								margin-top: 12rpx;

								.image_4 {
									margin: 4rpx 0 0;
									display: block;
									width: 32rpx;
									height: 36rpx;
								}

								.text_5 {
									margin-left: 16rpx;
								}
							}
						}

						.view_5 {
							border-radius: initial;
							width: initial;
							height: initial;
						}

						.image_5 {
							margin-top: 18rpx;
							border-radius: 8rpx;
							width: 76rpx;
							height: 76rpx;
							border: 2px solid #D85886;
							display: flex;
							align-items: center;
							justify-content: center;

							.icon {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
</style>